<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
</head>
<body>
    <input type="file" id='btnFile'>
    <input type="button" value="文件上传" onclick="upload(0)">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var btnFile = document.querySelector('#btnFile');
        var chunkSize = 1024*1024;
        //index表示第几个区块
        function upload(index){
            let file = btnFile.files[0];

            let [fname,fext] = file.name.split('.');

            let start = index*chunkSize;
            if(start>file.size){
                merge(file.name);
                return ;
            }
            //获取区块的内容
            let blob = file.slice(start,start+chunkSize);
            //区块名
            let blobName = `${fname}.${index}.${fext}`;
            //把区块转成file文件
            let blobFile = new File([blob],blobName);
            let formData = new FormData();
            
            formData.append('file',blobFile);
            axios.post('/upload',formData).then(res => {
                console.log(res);
                upload(++index);
            })
        }
        function merge(name){
            axios.post('/merge',{name:name}).then(res=>{
                console.log(res);
            })
        }
    </script>
</body>
</html>